<template>
<div>
  <searchBox @searchChange="searchChange" />
  <div class="gva-table-box">
      <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
    </div>
    <div class="gva-table-box">
    <div class="gva-btn-list"><el-text class="mx-1" size="large">用户平均收入</el-text></div>
        <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        :height="tableData.length > 10 ? 600 : null"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="新增(元)"
        >
        <template #default="scope">
            {{ scope.row.new_remain != '0.00' ? scope.row.new_remain : '-'}}
        </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="次留(元)"
        >
        <template #default="scope">
          {{ scope.row.time_remain != '0.00' ? scope.row.time_remain : '-'}}
        </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="三留(元)"
        >
        <template #default="scope">
            {{ scope.row.three_remain != '0.00' ? scope.row.three_remain : '-'}}
        </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="七留(元)"
        >
        <template #default="scope">
            {{ scope.row.seven_remain != '0.00' ? scope.row.seven_remain : '-'}}
        </template>
        </el-table-column>
      </el-table>
    </div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import lineChart from '../../components/echarts/lineChart.vue';
import searchBox from '../../components/search/searchBox.vue';
import type { TabsPaneContext } from 'element-plus';
import { sumByKey } from '../../utils/fmtData'

import {
        getHugeList
} from '@/api/openApi'

let activeName = ref<string|number>('new')
  const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName = ref(tab.paneName)
  const td = JSON.parse(JSON.stringify(tableData.value))
  tableData.value = []
  setTimeout(() => {
    tableData.value = td
  }, 200);
}

// =========== 表格控制部分 ===========
const tableData = ref([])
const searchInfo = ref({})

var searchChange = function(date) {
  searchInfo.value = date
  getTableData()
}


const chartData = ref({
  xAxis: [],
  series: [{
    name: '新增',
    type: 'line',
    data: []
  },{
    name: '次留',
    type: 'line',
    data: []
  },{
    name: '三留',
    type: 'line',
    data: []
  },{
    name: '七留',
    type: 'line',
    data: []
  }],
  legend: ['新增','次留','三留','七留'],
  title: 'ARPU数据'
})

const getTableData = async() => {
  const table = await getHugeList({ type:"upRetention",...searchInfo.value })
  if (table.code == 0) {
    let arr = []
    let data = {}
    chartData.value.xAxis = []
    chartData.value.series[0].data = []
    chartData.value.series[1].data = []
    chartData.value.series[2].data = []
    chartData.value.series[3].data = []
    if(table.data.list.length > 0){
      table.data.list.forEach(item=>{
        let jsonData = JSON.parse(item.response)
        data.new_remain = jsonData.newRemain ?? 0
        data.time_remain = jsonData.timeRemain ?? 0
        data.three_remain = jsonData.threeRemain ?? 0
        data.seven_remain = jsonData.sevenRemain ?? 0
        arr.push({
          date: item.date,
          new_remain: (data.new_remain / 100000).toFixed(2),
          time_remain: (data.time_remain / 100000).toFixed(2),
          three_remain: (data.three_remain / 100000).toFixed(2),
          seven_remain: (data.seven_remain / 100000).toFixed(2)
        })
        chartData.value.xAxis.push(item.date)
        chartData.value.series[0].data.push((data.new_remain / 100000).toFixed(2))
        chartData.value.series[1].data.push((data.time_remain / 100000).toFixed(2))
        chartData.value.series[2].data.push((data.three_remain / 100000).toFixed(2))
        chartData.value.series[3].data.push((data.seven_remain / 100000).toFixed(2))
      })
      arr = sumByKey(arr,'date')
      tableData.value = arr
    }else{
      tableData.value = []
    }
   
  }
}


</script>